// 存放vuex相关的核心代码
import Vue from 'vue'
import Vuex from 'vuex'
import user from '@/store/modules/user'
import setting from '@/store/modules/setting'

// 安装
Vue.use(Vuex)

// 创建仓库
const store = new Vuex.Store({
  // 严格模式(有利于学习，监测不规范的代码 -> 上线后要关闭)
  strict: true,
  // 1.通过state可以提供数据(所有组件共享)
  state: {
    title: '仓库大标题',
    count: 100,
    list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  },

  // 2.通过 mutations 可以提供修改数据的方法
  mutations: {
    // 所有 mutation 函数第一个参数都是 state
    // addCount (state, n, str) {   // mutation 不支持传递多个参数，如果需要传递多个，可以包装成数组或对象
    addCount (state, n) {
      // 修改数据
      state.count += n
    },
    subCount (state, n) {
      state.count -= n
    },
    changeCount (state, newCount) {
      state.count = newCount
    },
    changeTitle (state, title) {
      state.title = title
    }
  },

  // 3.actions异步处理
  // 注意：actions不能直接操作state，而是用来操作mutation的
  // 异步处理设计vuex的情况下都要往actions里封装
  actions: {
    // context上下文（未分模块，暂时可以当成store仓库）
    // context.commit('mutation名字', 提交载荷/额外参数)
    changeCountAction (context, num) {
      // 这里的setTimeout是模拟异步，项目中大部分场景是用于发送请求
      setTimeout(() => {
        context.commit('changeCount', num)
      }, 1000)
    }
  },

  // 4.类似于计算属性，但是只能查询不能修改
  getters: {
    // 1. 形参第一个参数是 state
    // 2. 必须有返回值，返回值是什么 getters 的值就是什么
    filterList (state) {
      return state.list.filter(item => item > 5)
    }
  },

  // 5.modules 模块
  modules: {
    user,
    setting
  }
})

// 导出给main.js用
export default store
